<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- css样式表 -->
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/rate/goodsDetail.css">
    <link rel="stylesheet" href="../../inc/include.css">

    <!-- js -->
    <script src="../../lib/zepto/zepto.js"></script>
    <script src="../../js/rateSearch.js"></script>
    <script src="../../js/htmlFont.js"></script>
    <script src="../../lib/template/template.js"></script>
    <script src="../../js/utils.js"></script>
</head>

<body>
    <header>
        <div class="header-top">
            <img src="../../images/header_logo.png" alt="">
            <img src="../../images/header_app.png" alt="">
        </div>
        <div class="header-footer">
            <input type="text" class="ipt" placeholder="请输入你想比价的商品">
            <a href="javascript:;">搜索</a>
        </div>
        <!-- <div class="kong"></div> -->
    </header>
    <div class="view">
        <!-- 头部菜单 -->
        <div class="goodTap">
            <div class="tap_left">

            </div>
            <div class="tap_right">
                <a href="javascript:;">
                    筛选
                </a>
            </div>
        </div>
        <!-- 商品详情主菜单 -->
        <div class="gd_main">

        </div>

        <!-- 详情注意 -->
        <div class="gd_warn">
            <p>*实际价格以各网站列出的实时售价为准，我们提供价格可能有数小时至数日的延迟</p>
        </div>
        <!-- 网上评价 -->
        <div class="gd_lineComments">
            <a href="javascript:;" class="glc_box">
                网上评价
            </a>
            <ul>


            </ul>
            <a href="javascript:;" class="glc_more">
                查看更多评价
            </a>
        </div>


    </div>
    <!-- 底部 -->
    <footer>
        <div class="footer-top">
            <ul>
                <li>登录</li>
                <li>注册</li>
                <li class="go">返回顶部</li>
            </ul>
        </div>
        <div class="footer-footer">
            <div class="shouji">
                <a href="javascript:;">手机APP下载</a>
                <a href="javascript:;"> 慢慢买手机版</a>
                <a href="javascript:;">-掌上比价平台</a>
            </div>
            <a href="javascript:;">m.mammambuy.com</a>

        </div>
    </footer>
</body>

</html>
<script type="text/template" id="gdListTemp">
    <input type="hidden" class="get_categoryId" name="categoryId" value="{{categoryId}}">
    <p>{{productName}}</p>
    <a href="javascript:;">
        {{productImg}}
    </a>
    <div class="gd_main_buys">
        <a href="javascript:;">比价购买</a>
        <a href="javascript:;">产品参数</a>
        <a href="javascript:;">评价(2322)</a>
    </div>
    
    <a class="gd_main_like" href="javascript:;">
        收藏
    </a>
    <!-- 网上京东 -->
    <div class="gd_online">
        {{bjShop}}
    </div> 
</script>
<!-- 分栏-->
<script type="text/template" id="gdtapsTemp">
    <span>
            <a href="../../index.html">首页</a>
        </span>
        <span>
            <a href="./rateSearch.html" >{{category}}</a>
        </span>
        <span >
            <a href="javascript:;" id="productName">乐视TV(live)</a>
        </span>
</script>

<!-- 评论页面  -->
<script type="text/template" id="gd_lineCommentTemp">
    {{each result as val key}}
    <li>
        <div class="glc_message">
            <span class="glc_user">{{val.comName}}</span>
            <span class="glc_data">{{val.comTime}}</span>
        </div>
        <span class="glc_from clearfix">
            {{val.comFrom}}
        </span>
        <p class="glc_Content">
            {{val.comContent}}
        </p>
    </li>
    {{/each}}
</script>
<script>
    var str = location.search;
    var id = utils.convertToObj(str).productId;
    var categoryId = utils.convertToObj(str).categoryId;
    // 渲染分栏页面
    $.ajax({
        url: "http://193.112.55.79:9090/api/getcategorybyid",
        type: "get",
        data: {
            categoryid: categoryId
        },
        dataType: "json",

        success: function (res) {
            // console.log(res);
            var htmlStr = template("gdtapsTemp", res.result[0]);
            // 渲染页面
            $(".tap_left").html(htmlStr);
            
            /* 设置地址 */
            setAddress();
        }
    })


    // 渲染主页面
    $.ajax({
        type: "post",
        url: "http://193.112.55.79:9090/api/getproduct",
        data: {
            productid: id,
        },
        dataType: "jsonp",
        success: function (res) {
            console.log(res);
            template.config("escape", false);
            // 存储模板
            var htmlStr = template("gdListTemp", res.result[0]);
            // 动态渲染模板
            $(".gd_main").html(htmlStr);

            // 设置商品名字
            $("#productName").html(res.result[0].productName)
        }
    })


    /* 评论页面 */
    $.ajax({
        url: "http://193.112.55.79:9090/api/getproductcom",
        type: "get",
        data: {
            productid: id
        },
        dataType: "json",
        success: function (res) {
            // console.log(res);
            var htmlStr = template("gd_lineCommentTemp", res);
            // 渲染页面
            $(".gd_lineComments ul").html(htmlStr);
        }
    })

    /* 获取地址栏 */

    function setAddress() {
        var htmls = localStorage.getItem("href");
        // console.log(htmls);
        // 把地址给a标签
        $(".tap_left span a").eq(1).attr("href", htmls);
    }
</script>